[ 求助 ] 一个div+css文字与层的排列问题

来源:百度知道 编辑:UC知道 时间:2024/05/11 18:49:29
````我想让box1层中的文字到box2层边框的时候会自动换行,box2要放在box1的右上方。
````我试用也如下层的绝对定位,可是是box2的层去盖住box1中的文字,求解决办法。深谢!

<style type="text/css">
#box1 { width:180px;height:100px; position:relative; background:#00CC99}
#box2 { background:#f30; width:100px;height:50px;position:absolute; top:0px;right:0;}
</style>
<div id="box1">内容一、内容一、内容一、内容一
<div id="box2"> 内容二、内容二、内容二、内容二、内容二、内容二、内容</div>
</div>
现在已经解决了,谢谢你们!
/****如果BOX2的right为0px;那BOX3的right数跟你BOX2的宽一样*****/
这样虽然可以做到不被覆盖的效果,但越过box2的文字还是不能自动延伸到边界的。以前好像在那里见过一个例子,现在找不到了。
其实用一个浮动float就行了,要注意的是正文内容要放在子层的下面。
比如这样就行了:
<style type="text/css">
#box1 { width:180px;height:100px;background:#00CC99}
#box2 { background:#f30; width:100px;height:50px; float:right}
</style>
<div id="box1">
<div id="box2"> 内容二、内容二、内容二、内容二、内容二、内容二、内容&

改成这样试试
<div id="box1"><div id="box3">内容一、内容一、内容一、内容一 </div>
<div id="box2"> 内容二、内容二、内容二、内容二、内容二、内容二、内容</div>
</div>

<style type="text/css">
#box3 {position:absolute; top:0px;right:100px;}
/****如果BOX2的right为0px;那BOX3的right数跟你BOX2的宽一样*****/
</style>